<template>
  <section class="container">
    <transition name="fade-in">
      <div class="screen">
        <div class="form">
          <div class="flex">
            <label>您的姓名</label>
            <input type="text" placeholder="请填写姓名" v-model="username" ref="username" />
          </div>
          <div class="flex">
            <label>联系电话</label>
            <input type="text" placeholder="请填写手机号码" v-model="phone" ref="phone" />
          </div>
          <div class="flex">
            <label>详细地址</label>
            <input type="text" placeholder="请填写详细地址" v-model="address" ref="address" />
          </div>
          <div class="mybtn">
            <a class="btn" v-on:click="submitInfo()">确定</a>
          </div>

        </div>
      </div>
    </transition>
    <simplert  ref="simplert"></simplert>
  </section>
</template>
<script>
  import Simplert from '../../components/dialog/dialog.vue'


  export default{
    data () {
      return {
        username : '',
        phone: '' ,
        address:'',
        token:''
      }
    },
    created () {
    },
    computed: {

    },
    beforeRouteEnter (to, from, next){
      next(vm=>{
          if(window.sessionStorage.getItem('address'))
          {
            vm.username = window.sessionStorage.getItem('userName')
            vm.phone = window.sessionStorage.getItem('phone')
            vm.address = window.sessionStorage.getItem('address')
          }
      })
    },
    mounted(){
      const that = this;
      this.$util.getUserToken().then(token=>{
        that.token = token;
        that.getInfo();
      })
    },
    components: {
      Simplert
    },
    methods: {
      openMessage(title, message, type) {
        let obj = {
          title: title,
          message: message,
          type: type
        }
        this.$refs.simplert.openSimplert(obj)
      },
      getInfo(){
        this.$api.post('/reclaim/v1/authApi/reclaimUserInfo','',s=>{
          if(s.module.realName == null)
          {
            window.sessionStorage.getItem('userName')?this.username = window.sessionStorage.getItem('userName'):this.username = ''
          }else{
            this.username = s.module.realName;
          }
          this.phone = s.module.phone;
        },f=>{
          this.openMessage(f.errorMessage)
        },{
          "token": this.token
        })
      },
      submitInfo(){
        if(this.username==='')
        {
          this.openMessage('请输入姓名');
          return false;
        }
        if(this.phone==='')
        {
          this.openMessage('请输入手机号码');
          return false;
        }
        let pat = /^1\d{10}$/; //手机号码1开头
        if (!pat.test(this.phone)) {
          this.openMessage('手机号码格式不正确');
          return false;
        }
        if(this.address==='')
        {
          this.openMessage('请输入地址');
          return false;
        }
        window.sessionStorage.setItem('userName',this.username);
        window.sessionStorage.setItem('phone',this.phone);
        window.sessionStorage.setItem('address',this.address);
        window.history.go(-1)
      }
    }
  }
</script>
<style scoped>
  @import "../styles/styles.css";
  input{  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;}
  #app{ width: 100%; height: 100%;}
  a,p,h3{font-size: 1.4rem;}
  .container,.screen{ position: relative; width: 100%; height: 100%; background: #f5f5f5;}
  .screen{ overflow-y: scroll;}
  .form{ padding: 1rem;}
  .flex{ display: flex;}
  .mybtn{ padding: 1rem 0;}
  .btn{ display: block; width: initial; flex-grow: 2;  height: 5rem; font-weight: 500; text-align: center; line-height: 5rem; font-size: 1.8rem; background: #ffd300; color: #333333;}
  .form>.flex{ background: #fff; padding: 0; border-bottom: 1px solid #e5e5e5;}
  .form label{ width: auto; flex-grow: 0; color: #333333; font-weight: bold; padding: 1.5rem 0.5rem;}
  .form input{ width: auto; flex-grow: 1; padding: 1.5rem 0.5rem; font-size: 14px; border: none;  }
  .addressList{ padding: 1rem;}
  .address{ padding: 1rem 1rem 1rem 6rem;  background-color: #fff; box-shadow: 0 0 1rem rgba(0,0,0,0.1); margin-bottom: 1rem; overflow: hidden;}
  .address>.pull-left{ width: 4rem; height: 4rem; float: left; margin-left: -5rem;}
  .address>.pull-left>img{ width: 100%;}
  .address p{ margin: 0.4rem 0 0;}
  .fsbg>img{ width: 100%;}
  .text-center{ text-align: center;}
  .fsbg{ padding: 5rem 8rem 4rem;}
  .slide-fade-m-enter-active {  transition: all .2s ease;  }
  .slide-fade-m-leave-active {  transition: all .3s ease;  }
  .slide-fade-m-enter, .slide-fade-m-leave-active {  opacity: 0;  }
</style>
